<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Filter</title>
		<link href="../contents/bootstrap.min.css" rel="stylesheet"/>
		<link href="../contents/wijmo.min.2022.04.22.uat.css" rel="stylesheet"/>
		<style type="text/css">
			.wj-flexgrid{
				max-height: 250px;
				margin:10px 0;
			}
			.body{
				margin-bottom: 20px;
			}
		</style>
	</head>
	<body>
		<div class="container-fluid">
			<div class="input-group">
				<div class="input-group-addon">
					<div id="grid" class="container"></div>
				</div>
			</div>
		</div>
		<input id="filter"/>
	</body>
	<script type="text/javascript" src="../Javascripts/wijmo.min.2022.04.22.uat.js"></script>
	<script type="text/javascript">
		document.readyState === "complete"?init():window.onload = init;
		
		function init(){
			var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = [];
			for (var i = 0; i < 200; i++) {
				data.push({
					id: i,
					country: countries[i % countries.length],
					downloads: Math.round(Math.random() * 20000),
					sales: Math.random() * 10000,
					expenses: Math.random() * 5000,
				});
			}
			
			let grid = new wijmo.grid.FlexGrid("#grid", {
				itemsSource:data,
				headersVisibility: wijmo.grid.HeadersVisibility.Column
			});
			
			document.getElementById("filter").addEventListener("input", function(e){
				let filter = e.target.value.toLowerCase();
				grid.collectionView.filter = function(item){
					return filter.length == 0 || item.country.toLowerCase().indexOf(filter) > -1;
				}
			});
		}
	</script>
</html>